<template>
  <div style="heigth:100%">
    <div class="cesium-container" id="cesiumContainer"></div>
  </div>
</template>

<script>
//引入cesium插件及样式
import * as Cesium from "cesium";
import "cesium/widgets.css";

export default {
  name: 'HelloWorld',
  data(){
    return {
      viewer:null
    }
  },
  mounted(){
   this.initCesium()
  },
  methods:{
    async initCesium (){
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyMTYzNmIwNS0zNTFhLTRmYmYtOWQ0MS1kZjQxMThkNjI5ZGEiLCJpZCI6MjE3NTE4LCJpYXQiOjE3MTY1Mzc0MTd9.a8MU64nxfReh2w1CeLOeSiYN-gVp9UJa3GVH3YrPtlg'
      // Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwMDY0ZDNiOC0zYTVkLTQzMzktYjcxNi1kZTkzYWU3MjgxZmYiLCJpZCI6ODQ3OSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MjAyNzYxMX0.9cs7FVelR4VVXD2OVeN0PKtAd5QQOdM-PlipYBpAeIE"
      const viewer = new Cesium.Viewer('cesiumContainer',{
        // animation: false,
      })
      viewer.imageryLayers.get(0).show = true;
      // setTimeout(()=>{
      //   viewer.imageryLayers.get(0).show = true;
      //   console.log('加载')
      // },3000)
      
      // this.viewer.camera.setView({
      //   destination: Cesium.Cartesian3.fromDegrees(-74.0059, 40.7128, 2000),
      //   orientation: {
      //     heading: Cesium.Math.toRadians(0.0),
      //     pitch: Cesium.Math.toRadians(-90),
      //     roll: 100.0
      //   }
      // });
      // this.viewer.resolutionScale = 0.5; // 降低渲染分辨率
      // // this.viewer.scene.globe.baseColor = Cesium.Color.YELLOW;//设置地球颜色
      // //隐藏大气，不隐藏的话周围会有一圈光晕
      // // this.viewer.scene.skyAtmosphere.show = false;
      // // this.viewer.imageryLayers.get(0).show = true;
      // // this.viewer.imageryLayers.addImageryProvider(Cesium.createWorldImagery());
      // // 添加世界图
      // // this.viewer.imagery.addLayer(Cesium.createWorldImagery());
      // // 添加地形
      // this.viewer.terrainProvider = Cesium.createWorldTerrain();
      // const tileset = this.viewer.scene.primitives.add(
      //   await Cesium.Cesium3DTileset.fromIonAssetId(2275207),
      // );

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.cesium-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>


